TI13312 Tema 10 Nivel Intermedio
Ingeniería de requerimientos de software · Universidad TecMilenio

Modelado de
requerimientos para
WebApps

Contenido, interacción, funcionalidad, navegación y configuración
de aplicaciones web según Pressman (2010)

10.1 Contenido de la Web 10.2 Interacción y Funcionalidad 10.3 Navegación y Configuración

Ref.: Pressman, R. (2010). Ingeniería de Software. Un enfoque práctico (7ª ed.). McGraw Hill.

🌐
Diapositiva 02 · Contexto
¿Por qué importan las WebApps?
Escenario cotidiano
Un día normal: abres el banco en línea, revisas calificaciones en la app escolar, publicas en redes sociales, consultas el clima. Sin darte cuenta, estás usando aplicaciones web todo el tiempo.
Internet como plataforma de negocios
La Internet replantea la forma de hacer negocios. Cualquier empresa, grande o pequeña, debe incluir Internet en su plan estratégico como herramienta de comunicación con clientes.
Migración a la web
Los negocios están migrando sus sistemas de información a webapps por su versatilidad en diseño, funcionalidad, acceso e independencia del hardware.
Preguntas detonadoras 🔑
❓ ¿Cómo modelar los requerimientos de las aplicaciones web?
❓ ¿En qué se debe enfocar el ingeniero de requerimientos para documentar las características que se buscan?
Definición
Una webapp abarca desde una simple página web hasta aplicaciones que integran bases de datos, servicios de software, almacenamiento y ambientes de cómputo complejos.
🎯
Diapositiva 03 · Objetivos
Al terminar este tema podrás…
1
Identificar los atributos fundamentales de las WebApps según Pressman (2010): uso intensivo de redes, concurrencia, disponibilidad, seguridad y los demás que las distinguen del software tradicional.
2
Construir modelos de contenido utilizando árboles jerárquicos de objetos e información para describir correctamente lo que una WebApp mostrará al usuario.
3
Modelar la interacción y la funcionalidad de una WebApp mediante casos de uso, diagramas de secuencia, diagramas de estado y prototipos de interfaz de usuario.
4
Documentar requerimientos de navegación y configuración, respondiendo las preguntas guía de Pressman para priorizar funciones, definir breadcrumbs y describir las características técnicas del entorno cliente-servidor.
Checkpoint
Reconocer los componentes indispensables que toda webapp debe tener · Modelar las partes de una webapp para comunicar mejor los requerimientos al equipo de desarrollo.
📋
Diapositiva 04 · Sección 10.1
Atributos de las WebApps — Pressman (2010)
Una webapp puede ser diseñada no solo por profesionales de TI, sino también por diseñadores gráficos, mercadotecnia, finanzas y RH. Cada área puede solicitar requerimientos específicos aprovechando las ventajas de la web.
🌍
Uso intensivo de redes
Cobertura mundial mediante Internet. Una app desde un pequeño pueblo puede ser accedida por cualquier persona conectada.
👥
Concurrencia
Permite el acceso simultáneo de una gran cantidad de usuarios. Ejemplo: venta de boletos de concierto agotados en minutos.
📈
Carga impredecible
Los usuarios acceden motivados por distintos aspectos y en diferentes momentos, sin previo aviso.
⚡
Rendimiento
Los usuarios tienen poca tolerancia a respuestas lentas. Requiere plataforma robusta de hardware.
🕐
Disponibilidad 24/7
Una tienda electrónica recibe pedidos 365 días del año, independiente de husos horarios y horarios de tienda física.
🎨
Orientadas a los datos
Muestran información en múltiples medios: texto, imágenes, audio y video, facilitando la administración del contenido.
💅
Contenido sensible y estética
La apariencia dice mucho sobre la calidad del software. Puede motivar o desalentar a los usuarios.
🔄
Evolución continua
El contenido se actualiza constantemente. Imagina YouTube actualizando su contenido solo una vez al mes.
🚀
Inmediatez
Nuevas versiones llegan al usuario en tiempo muy corto, generando ventaja competitiva en ventanas de mercado.
🔒
Seguridad
El acceso abierto trae riesgos considerables. Se deben implantar medidas para proteger la información sensible.
📄
Diapositiva 05 · Sección 10.1
Modelo de Contenido
"El modelo del contenido identifica el espectro completo de contenido que dará la webapp. El contenido incluye datos de texto, gráficos e imágenes, video y sonido."
— Pressman, R. (2010). Ingeniería de Software. Un enfoque práctico (7ª ed.). McGraw Hill.
Objetos de contenido
Al usar texto, video, banner o imagen se habla de un objeto de contenido. Este puede recuperarse desde:
  • Un archivo en un servidor
  • Una base de datos
  • La propia webapp (embebido)
¿Cómo se usa en IR?
Inclusión en casos de uso
Los objetos de contenido pueden incluirse como parte de la descripción de los casos de uso. El IR debe describir el escenario que aclare qué función desempeñará en la webapp.
Ejemplo: tienda virtual
Requerimiento: usar un carrito de compras que registre los productos seleccionados. El objeto "carrito de compras" es parte del modelo de contenido con cierto comportamiento esperado.
Árbol jerárquico de contenido
Estructura
Para el requerimiento: "Podré obtener información descriptiva y de precios de cada componente del producto."

Se construye un árbol jerárquico:
Componente → Descripción Precio Imagen

Recuadros sombreados = objetos | Recuadros blancos = información. Base para diseñar el contenido de la webapp.
🖱️
Diapositiva 06 · Sección 10.2
Modelo de Interacción
¿Qué modela?
La interacción describe cómo el usuario operará la aplicación. Explica los pasos que deberá realizar para llegar a un resultado.
Herramientas para modelar la interacción
HerramientaPropósito
Casos de usoDescribir escenarios de interacción actor-sistema
Diagramas de secuenciaMostrar el orden cronológico de los mensajes
Diagramas de estadoRepresentar los estados posibles de un objeto
Prototipos de UIRepresentación física de la interfaz de usuario
Preguntas clave para modelar interacción
  • ¿Es posible utilizar íconos que representen claramente la acción?
  • ¿El usuario puede deshacer la acción en caso de cambiar de opinión?
  • ¿En qué lugar de la webapp aparecerá el menú de opciones?
  • ¿Qué ayuda es posible ofrecer al usuario en caso de alguna duda?
Recomendación de Pressman
Crear un prototipo de interfaz de usuario desde el análisis (no solo en diseño): entre más pronto se revise la representación física de la UI, más probable es lograr los resultados esperados.
⚠️ Si el modelo describe demasiados pasos (elegir producto → datos de envío → pago → factura), el usuario puede perderse y abandonar la compra.
⚙️
Diapositiva 07 · Sección 10.2
Modelo Funcional
Propósito
Demostrar que los requerimientos funcionales del sistema son tomados en cuenta y no falta ninguno, dando tranquilidad al usuario sobre lo que incluye el sistema.
"Funcionalidad observable: es el resultado visible del software."
— Pressman (2010)
Dos tipos de funcionalidad
👁️
Funciones visibles (observables)
Son el resultado directo que el usuario percibe. Ejemplo: el gráfico generado a partir de un reporte de datos.
🔧
Funciones no visibles
Operaciones necesarias para producir las funciones visibles. En IR se describe el "qué", no el "cómo".
⚠️ Regla de oro en IR
Al describir la funcionalidad no visible, el ingeniero de requerimientos debe evitar describir demasiado el "cómo" y centrarse en el "qué" se espera que haga el sistema.
Ejemplo completo
Visible: Gráfico de reporte generado desde un archivo de datos.
No visible: Lectura del archivo → parseo de datos → cálculo estadístico → renderizado del gráfico.
El IR documenta la funcionalidad visible + describe qué debe hacer el sistema internamente, sin especificar algoritmos.
🗺️
Diapositiva 08 · Sección 10.3
Modelo de Navegación
La navegación debe ser modelada expresando las características que espera ver el usuario. Algunas funciones son críticas y requieren acceso directo; otras pueden ubicarse en lugares secundarios porque son poco frecuentes.
Preguntas guía (Pressman, 2010)
  • ¿En qué elementos hacer énfasis para forzar cierta navegación?
  • ¿Qué prioridad se le da a las funciones y a su presentación?
  • ¿Existirá algún mecanismo de ubicación como breadcrumbs o mapas del sitio?
  • ¿Sería necesario mantener un log o registro de la navegación de los usuarios?
  • ¿La webapp permite que el usuario configure su navegación favorita?
  • ¿La webapp permitirá vínculos externos que saquen al usuario de la aplicación?
  • ¿Cuánto tiempo sin actividad para dar de baja la sesión?
Conceptos clave
🍞
Breadcrumbs (ruta de navegación)
Modelo de navegación jerárquico que permite al usuario ubicarse. Ejemplo: Carreras > Ingeniería > Desarrollo de software
🗺️
Mapa del sitio
Vista estructural jerárquica de todas las secciones de la webapp, útil para que el usuario se oriente y no se pierda.
Impacto en diseño
Estas preguntas ofrecen información que el diseñador debe tomar en cuenta para proponer una navegación adecuada a las necesidades del cliente.
🖥️
Diapositiva 09 · Sección 10.3
Modelos de Configuración
Definición
Los modelos de configuración describen los atributos técnicos tanto del lado del cliente como del servidor. Son especialmente útiles cuando se va a sustituir un sistema existente y se contempla reutilizar el hardware actual.
Ejemplo
Los requerimientos técnicos de una webapp para usuarios de Mac OSX serán relativamente diferentes a los de una PC con Windows en cuanto al tipo de navegador y protocolo de comunicación.
¿Qué se describe en un modelo de configuración?
  • Sistema operativo y características del hardware del servidor actual
  • Características de interoperabilidad con otras webapps, sistemas comerciales o APIs existentes
  • Tipos de redes y protocolos de comunicación utilizados
  • Características del navegador (versión, compatibilidad)
  • Capacidades de las terminales del cliente
  • Necesidades de uso de dispositivos móviles (tabletas, smartphones)
Resultado
Esta información moldea un diseño específico que considera las características de configuración actuales del entorno donde operará la webapp.
📊
Diapositiva 10 · Síntesis
Los 5 modelos de requerimientos para WebApps
Modelo Responde a… Artefactos / técnicas Foco del IR
Contenido ¿Qué información mostrará la webapp? Árbol jerárquico de objetos e información Texto, imágenes, audio, video, datos de BD
Interacción ¿Cómo operará el usuario la aplicación? Casos de uso, diagramas de secuencia/estado, prototipos de UI Pasos del usuario para obtener un resultado
Funcional ¿Qué debe hacer el sistema? Lista de funciones observables + operaciones internas El "qué", no el "cómo"
Navegación ¿Cómo se moverá el usuario por la app? Breadcrumbs, mapa del sitio, jerarquía de menús Prioridad, orientación, sesión, vínculos
Configuración ¿En qué entorno técnico operará? Fichas de hardware, SO, navegadores, redes, APIs Cliente: dispositivos/navegadores · Servidor: SO/redes/APIs
Conclusión clave
El ingeniero de requerimientos debe enfocarse principalmente en modelar el contenido, la funcionalidad, la interacción, la configuración y la navegación porque esencialmente es lo que define el resultado de una aplicación web. — Pressman (2010)
✏️
Diapositiva 11 · Ejercicio práctico
¿Cuánto aprendiste? — Preguntas de comprensión
P1
¿Cuál de los siguientes es un atributo de las WebApps según Pressman?
  • a Instalación local obligatoria
  • b ✓ Disponibilidad 24/7 y evolución continua
  • c Independencia total de Internet
P2
El modelo de contenido identifica…
  • a Los pasos que sigue el usuario para navegar
  • b ✓ El espectro completo de contenido (texto, imágenes, video, audio) que dará la webapp
  • c Las características técnicas del servidor
P3
¿En qué debe centrarse el IR al describir la funcionalidad no visible?
  • a El algoritmo de implementación
  • b El lenguaje de programación a usar
  • c ✓ El "qué" hace el sistema, no el "cómo"
P4
Los breadcrumbs en una webapp sirven para…
  • a ✓ Ayudar al usuario a ubicarse dentro de la jerarquía de navegación
  • b Registrar las credenciales del usuario
  • c Almacenar objetos de contenido en BD
P5
¿Cuándo es más útil un modelo de configuración?
  • a Cuando se desarrolla la primera webapp de la empresa
  • b ✓ Cuando se sustituye un sistema existente y se contempla reutilizar hardware actual
  • c Solo cuando se usarán dispositivos móviles
P6
La "concurrencia" como atributo de una webapp significa…
  • a Que la app funciona sin conexión a internet
  • b ✓ Que permite el acceso simultáneo de una gran cantidad de usuarios
  • c Que actualiza el contenido automáticamente
🏆
Diapositiva 12 · Actividad evaluable
Actividad: Modelado de requerimientos para una WebApp real
🎯 Escenario
Una tienda de ropa local quiere lanzar su primera tienda en línea. Como ingeniero de requerimientos, debes generar la documentación base antes de pasar al equipo de desarrollo. Tiempo estimado: 45 min.
1️⃣
Modelo de contenido

Define los objetos de contenido principales de la webapp: catálogo de productos, ficha del producto (nombre, precio, talla, imagen, descripción), carrito de compras. Construye el árbol jerárquico con al menos 3 niveles.

2️⃣
Modelo de interacción

Escribe el caso de uso "Comprar producto". Describe el flujo principal (actor: cliente) desde que ingresa al catálogo hasta que recibe la confirmación de pago. Identifica flujos alternos (producto sin stock, pago rechazado).

3️⃣
Modelo funcional (observable)

Lista al menos 6 funciones observables del sistema (ej: buscar productos, filtrar por talla, agregar al carrito). Para 2 de ellas, describe brevemente la funcionalidad no visible sin especificar el "cómo".

4️⃣
Modelo de navegación y configuración

Responde al menos 4 de las 7 preguntas guía de Pressman para navegación. Especifica el modelo de configuración: tipo de servidor, navegadores soportados, dispositivos (desktop/móvil) e interoperabilidad con pasarela de pago.

Entregable
Documento PDF con los 4 modelos. Mínimo 2 páginas. Incluir árbol jerárquico y caso de uso en formato de tabla o diagrama.
Criterios de evaluación
Corrección técnica de los modelos · Uso apropiado de la terminología de Pressman · Coherencia entre los 4 modelos · Claridad de la documentación
📚
Diapositiva 13 · Glosario y Bibliografía
Términos clave y fuentes
Glosario
API (Application Program Interface)
Grupo de rutinas, protocolos y herramientas que facilitan la integración de funciones de diferentes componentes de un software.
Breadcrumbs (ruta de navegación)
Modelo de navegación web que permite al usuario ubicarse en un menú jerárquico. Aparece como hipervínculos separados por ">": Carreras > Ingeniería > Dev
Protocolo
Serie de reglas que permiten la intercomunicación entre equipos o plataformas de diferente arquitectura.
WebApp
Grupo de sistemas y aplicaciones que utilizan Internet como plataforma para ofrecer algún servicio. Va desde una simple página web hasta complejas plataformas con BD, APIs y almacenamiento en la nube.
Knowledge worker
Empleado cuyas contribuciones son creativas, no físicas. Sus herramientas suelen ser webapps especializadas.
Bibliografía
📗
Lectura obligatoria — Sección 7.5
Pressman, R. (2010). Ingeniería de Software. Un enfoque práctico (7ª ed.). México: McGraw Hill.
🌐
Web Applications Basics
Conallen, J. (2002). Conceptos aplicados a las webapps.
pearsonhighered.com/samplechapter/0201730383.pdf
🔒
Security Requirements Analysis of Web Applications using UML
Chehida, S. y Rahmouni, M. (2012). Requerimientos de seguridad en webapps.
ceur-ws.org/Vol-867/Paper24.pdf
📱
Native Apps vs. Mobile Web Apps
Jobe, W. (2013). Comparación entre aplicaciones nativas y web móviles. iJIM, 7(4), 27-32.
📊
Evaluating Quality and Functional Size of Operative WebApps
Abrahão, S., Olsina, L. y Pastor, O. (2002). Metodología para evaluar calidad y tamaño funcional.
users.dsic.upv.es/~west/iwwost02/papers/abrahao.pdf
✅ Tema 10 completado

Ideas clave del
Modelado de WebApps

WebApp
Sistema web con atributos únicos: concurrencia, disponibilidad, carga impredecible, seguridad, evolución continua.
Contenido
Se modela con un árbol jerárquico de objetos (texto, imagen, video, audio). Base para diseñar la webapp.
Interacción
Se modela con casos de uso, diagramas y prototipos de UI. Cuanto antes se revise, mejor el resultado.
Funcionalidad
Describir el "qué", no el "cómo". Incluir funciones observables y no visibles.
Navegación
Priorizar funciones, breadcrumbs, sesión, vínculos externos. Responder las 7 preguntas de Pressman.
Configuración
Describir entorno técnico: SO, hardware, navegadores, redes, protocolos, APIs, dispositivos móviles.
10.1 Contenido 10.2 Interacción y funcionalidad 10.3 Navegación y configuración

TI13312 Ingeniería de requerimientos de software · Universidad TecMilenio 💻